@charset "utf-8";
//计算根的像素大小
@function r($px) {
    @return ($px / 40) *1rem;
}

//计算减半的函数
@function half($px) {
    @return ($px / 2) *1px;
}

$color_them: #ffa969;
$font_size:r(30);
@mixin a_block {
    display: block;
    width: 100%;
    height: 100%;
}

@mixin middle {
    vertical-align: middle;
    display: inline-block;
}

html,
body {
    height: 100%;
    position: relative;
}

#main {
    position: absolute;
    top: half(123);
    bottom: half(135);
    width: r(750);
    padding: 0 half(23);
    box-sizing: border-box;
    //多出部分滚动
    overflow: scroll;
    // 滚动条产生滚动回弹的效果
    -webkit-overflow-scrolling: touch;
}

// 头部
.header {
    .favorite {
        width: half(51);
        height: half(48);
        img {
            width: 100%;
        }
    }
}

.swiper-container {
    width: r(705);
    height: r(259);
    img {
        width: 100%;
        height: 100%;
    }
    // .swiper-pagination-bullet-active {
    //     width: half(50);
    // }
}

input[type="button"] {
    right: 0;
    width: r(145);
    height: r(75);
    line-height: r(75);
    background: $color_them;
    border: 0;
    border-radius: r(15);
    font-size: r(30);
    color: #fff;
}

// 产品详情
.food_detail {
    margin: 0 r(20);
    .buy {
        font-size: 0;
        position: relative;
        height: r(120);
        span {
            left: r(-12);
            display: inline-block;
            font-size: r(72);
            color: $color_them;
        }
        input[type="button"],
        span {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }
    }
}

// 好评度
.rating {
    height: r(77);
    font-size: 0;
    position: relative;
    .favorite {
        left: 0;
        width: r(51);
        height: r(48);
        img {
            width: 100%;
        }
    }
    .favorite,
    p,
    .sum_title {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    p {
        left: r(52);
        font-size: r(30);
        margin-left: r(14);
        span {
            font-size: r(30);
            color: $color_them;
        }
    }
    .sum_title {
        right: 0;
        color: #8e8e8e;
        font-size: half(26);
    }
}

// 适用商户
.merchants {
    position: relative;
    height: r(67);
    margin-top: r(19);
    background: $color_them;
    span {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #fff;
        display: inline-block;
        &:first-child {
            left: r(11);
            font-size: r(30);
            margin-left: r(11);
        }
        &:last-child {
            right: r(11);
            font-size: r(47);
        }
    }
}

// 商品店铺
.store {
    position: relative;
    margin-top: r(10);
    .store_img {
        width: r(176);
        height: r(176);
        margin-right: r(24);
        a {
            @include a_block;
            img {
                width: 100%;
            }
        }
    }
    .store_text {
        .food_store {
            font-size: r(30);
            margin-top: r(12);
        }
        .star {
            margin: r(10) 0 r(12);
            font-size: 0;
            span {
                display: inline-block;
            }
            .star_img {
                margin-left: r(4);
                line-height: r(34);
                width: r(35);
                height: r(34);
                @include middle;
                img {
                    width: 100%;
                }
            }
            .text {
                color: #929292;
                font-size: half(26);
                margin-left: r(11);
                @include middle;
            }
        }
        .distance {
            color: #929292;
            font-size: half(24);
        }
        .look_detail {
            font-size: half(20);
            margin-top: r(23);
            a {
                color: $color_them;
            }
        }
    }
    input[type="button"] {
        position: absolute;
        right: 0;
        top: r(63);
    }
}